<template>
  <!-- <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"> -->
    <div id="mesordermangemento-add-or-update">
    <div class="classified-title">
      <span>订单信息</span>
    </div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
    
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="订单编号">
              <el-input readonly v-model="dataForm.orderNum" placeholder="订单编号"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="客户" prop="customerNum">
              <el-select v-model="dataForm.customerNum" placeholder="客户">
                <el-option
                  v-for="item in customer"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="参考报价" prop="quotationRef">
              <el-input v-model="dataForm.quotationRef" placeholder="参考报价"></el-input>
            </el-form-item>
          </div>
        </el-col>   
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="实际报价" prop="quotationActual">
              <el-input v-model="dataForm.quotationActual" placeholder="实际报价"></el-input>
            </el-form-item>
          </div>
        </el-col>
        
      </el-row>

      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="参考纳期" prop="deliveryRef">
              <el-date-picker
                v-model="dataForm.deliveryRef"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="date"
                placeholder="参考纳期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>   
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="实际纳期" prop="deliveryActual">
              <el-date-picker
                v-model="dataForm.deliveryActual"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="date"
                placeholder="实际纳期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="100">   
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="责任人" prop="orderKeeper">
              <el-input v-model="dataForm.orderKeeper" placeholder="责任人"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="作成日" prop="createDate">
              <el-date-picker
                v-model="dataForm.createDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="date"
                placeholder="作成日"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="100"> 
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="订单状态" prop="orderStatus">
              <el-select v-model="dataForm.orderStatus" placeholder="订单状态">
                <el-option
                  v-for="item in orderStatus"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>  
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="有效开始日" prop="effectiveStartDate">
              <el-date-picker
                v-model="dataForm.effectiveStartDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="date"
                placeholder="有效开始日"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="100"> 
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="生产状态" prop="productionStatus">
              <el-select v-model="dataForm.productionStatus" placeholder="生产状态">
                <el-option
                  v-for="item in productStatus"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    
    </el-form>
    <div class="classified-title">
      <span>产品详细</span>
    </div>
    <!-- <el-button 
      type="primary" 
      id="workingProcedureAddBtn" 
      icon="el-icon-plus" 
      @click="addWorkingProcedure()">
        新增
    </el-button> -->
    <!-- <el-table
      :data="tableData"
      stripe
      border
      height="205px"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      ref="table"
      style="width: 100%"> 
        <el-table-column
          prop="productionName"
          header-align="center"
          align="center"
          label="产品名称">
        </el-table-column>
        <el-table-column
          prop="dispalyOrder"
          header-align="center"
          align="center"
          width="70"
          label="顺序">
        </el-table-column>
        <el-table-column
          prop="unitPrice"
          header-align="center"
          align="center"
          width="120"
          label="单价">
        </el-table-column>
        <el-table-column
          prop="productionCount"
          header-align="center"
          align="center"
          width="120"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          header-align="center"
          align="center"
          width="200"
          label="总价">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="100"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addWorkingProcedure(scope.$index, tableData)">修改</el-button>
            <el-button type="text" size="small" @click="deleteRow(scope.$index, tableData)">删除</el-button>
          </template>
        </el-table-column>
    </el-table> -->
    <el-form :model="form" ref="form" label-width="100px">
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="产品">
              <el-select v-model="form.productionNum" placeholder="产品" @change="setProductionName">
                <el-option
                  v-for="item in productionData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="表示顺序">
              <el-input v-model="form.dispalyOrder" placeholder="表示顺序" auto-complete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="单价">
              <el-input v-model="form.unitPrice" placeholder="单价" auto-complete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="数量">
              <el-input v-model="form.productionCount" placeholder="数量" auto-complete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="总价">
              <el-input readonly v-model="totalPrice" placeholder="总价" auto-complete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </div>

    <!-- <el-dialog id="mesordermangemento-add-or-update-dialog" title="订单详细信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form">
        <el-form-item label="产品" :label-width="formLabelWidth">
          <el-select v-model="form.productionNum" placeholder="产品" @change="setProductionName">
            <el-option
              v-for="item in productionData"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表示顺序" :label-width="formLabelWidth">
          <el-input v-model="form.dispalyOrder" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="单价" :label-width="formLabelWidth">
          <el-input v-model="form.unitPrice" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="form.productionCount" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="总价" :label-width="formLabelWidth">
          <el-input readonly v-model="totalPrice" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTable">确 定</el-button>
      </div>
    </el-dialog> -->
    </div>
  <!-- </el-dialog> -->
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        orderNum: '',
        customerNum: '',
        quotationRef: '',
        quotationActual: '',
        deliveryRef: '',
        deliveryActual: '',
        orderKeeper: '',
        createDate: '',
        orderStatus: '',
        effectiveStartDate: '',
        productionStatus: '1001'
      },
      dataRule: {
        customerNum: [
          { required: true, message: '客户不能为空', trigger: 'blur' }
        ],
        quotationRef: [
          { required: true, message: '参考报价不能为空', trigger: 'blur' }
        ],
        quotationActual: [
          { required: true, message: '实际报价不能为空', trigger: 'blur' }
        ],
        deliveryRef: [
          { required: true, message: '参考纳期不能为空', trigger: 'blur' }
        ],
        deliveryActual: [
          { required: true, message: '实际纳期不能为空', trigger: 'blur' }
        ],
        orderKeeper: [
          { required: true, message: '责任人不能为空', trigger: 'blur' }
        ],
        createDate: [
          { required: true, message: '作成日不能为空', trigger: 'blur' }
        ],
        orderStatus: [
          { required: true, message: '订单状态不能为空', trigger: 'blur' }
        ],
        effectiveStartDate: [
          { required: true, message: '有效开始日不能为空', trigger: 'blur' }
        ],
        productionStatus: [
          { required: true, message: '生产状态不能为空', trigger: 'blur' }
        ]
      },
      form: {
        productionName: '',
        productionNum: '',
        dispalyOrder: '',
        unitPrice: '',
        productionCount: '',
        totalPrice: ''
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      // table数据
      tableData: [],
      addWorkingProcedureFlag: false,
      dataListLoading: false,
      dataListSelections: [],
      status: 'save',
      index: -1,
      productStatus: [],
      orderStatus: [],
      customer: [],
      productionData: []
    }
  },
  computed: {
    totalPrice() {
      this.form.totalPrice =
        this.form.unitPrice * this.form.productionCount || ''
      return this.form.unitPrice * this.form.productionCount || ''
    }
  },
  mounted() {
    this.optionLists()
    this.init(this.$route.params.id)
  },
  methods: {
    init(id) {
      this.dataForm.orderNum = id || ''
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.orderNum) {
          this.$http({
            url: this.$http.adornUrl(
              `/order/mesordermangemento/info/${this.dataForm.orderNum}`
            ),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm = cloneDeep(data.mesOrderMangementO)
              this.tableData = cloneDeep(data.orderDetailList)
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/order/mesordermangemento/${
                !this.dataForm.orderNum ? 'save' : 'update'
              }`
            ),
            method: 'post',
            data: this.$http.adornData({
              orderNum: this.dataForm.orderNum || undefined,
              customerNum: this.dataForm.customerNum,
              quotationRef: this.dataForm.quotationRef,
              quotationActual: this.dataForm.quotationActual,
              deliveryRef: this.dataForm.deliveryRef,
              deliveryActual: this.dataForm.deliveryActual,
              orderKeeper: this.dataForm.orderKeeper,
              createDate: this.dataForm.createDate,
              orderStatus: this.dataForm.orderStatus,
              effectiveStartDate: this.dataForm.effectiveStartDate,
              productionStatus: this.dataForm.productionStatus,
              mesOrderMangementDetailList: this.tableData
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  eventBus.$emit('closeCurrentPage')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 取消
    cancle() {
      eventBus.$emit('closeCurrentPage')
    },
    addWorkingProcedure(index, data) {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        if (data) {
          this.status = 'update'
          this.index = index
          this.form = Object.assign({}, data[index])
        } else {
          this.status = 'save'
          this.form = {}
        }
      })
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    saveTable() {
      this.dialogFormVisible = false
      if (this.status === 'save') {
        this.tableData.push(Object.assign({}, this.form))
      } else {
        for (var p in Object.assign({}, this.form)) {
          this.$set(
            this.tableData[this.index],
            p,
            Object.assign({}, this.form)[p]
          )
        }
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    optionLists() {
      let arr = ['product_status', 'order_status']
      this.$http({
        url: this.$http.adornUrl('/basic/mescodemasterm/dataList'),
        method: 'post',
        data: this.$http.adornParams(arr, false)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          data.product_status.forEach((item, index) => {
            let obj = {}
            obj.code = item.code
            obj.name = item.name
            this.productStatus.push(obj)
          })
          data.order_status.forEach((item, index) => {
            let obj = {}
            obj.code = item.code
            obj.name = item.name
            this.orderStatus.push(obj)
          })
        }
      })

      this.$http({
        url: this.$http.adornUrl('/basic/mescustomerm/list'),
        method: 'get',
        params: this.$http.adornParams({
          limit: -1
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          data.page.list.forEach((item, index) => {
            let obj = {}
            obj.code = item.customerNum
            obj.name = item.customerName
            this.customer.push(obj)
          })
        }
      })

      this.$http({
        url: this.$http.adornUrl('/basic/mesproductioninfob/list'),
        method: 'get',
        params: this.$http.adornParams({
          limit: -1
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          data.page.list.forEach((item, index) => {
            let obj = {}
            obj.code = item.productionNum
            obj.name = item.productionName
            this.productionData.push(obj)
          })
        }
      })
    },
    setProductionName(data) {
      this.form.productionName = this.productionData.find(
        item => item.code === data
      )['name']
    }
  }
}
</script>
<style scoped lang="scss">
#mesordermangemento-add-or-update {
  width: 90%;
  margin: 15px auto 0;
  .el-form-item {
    .el-select {
      width: 300px;
    }
    .el-input {
      width: 300px;
    }
  }
  .el-table {
    margin: 10px auto;
  }
  .footer {
    text-align: center;
  }
  .classified-title {
    font-size: 15px;
    font-style: oblique;
    color: #6379bb;
    border-bottom: 1px solid #ddd;
    margin: 8px 10px 10px 10px;
    padding-bottom: 5px;
  }
  #workingProcedureAddBtn {
    height: 25px;
    padding: 2px 15px;
    float: right;
    margin-bottom: 10px;
  }
}
</style>
<style lang="scss">
#mesordermangemento-add-or-update-dialog {
  .el-form-item {
    .el-select {
      width: 450px;
    }
    .el-input {
      width: 450px !important;
    }
  }
}
</style>
